<#import "spring.ftl" as s/>
<!DOCTYPE HTML>
<html>
<head>
<title>登陆工资查询系统</title>
<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a, abbr, acronym, address, applet, article, aside, audio, b, big,
	blockquote, body, canvas, caption, cite, code, dd, del, details, dfn,
	div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1,
	h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd,
	label, legend, mark, menu, nav, nav li, nav ul, object, ol, output, p,
	pre, q, ruby, s, samp, section, small, span, strike, strong, sub,
	summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, var,
	video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font: inherit;
	font-size: 100%
}

article, aside, details, figcaption, figure, footer, header, hgroup,
	menu, nav, section {
	display: block
}

ol, ul {
	margin: 0;
	padding: 0;
	list-style: none
}

blockquote, q {
	quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
	content: '';
	content: none
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

a {
	text-decoration: none
}

.txt-rt {
	text-align: right
}

.txt-lt {
	text-align: left
}

.txt-center {
	text-align: center
}

.float-rt {
	float: right
}

.float-lt {
	float: left
}

.clear {
	clear: both
}

.pos-relative {
	position: relative
}

.pos-absolute {
	position: absolute
}

.vertical-base {
	vertical-align: baseline
}

.vertical-top {
	vertical-align: top
}

.underline {
	margin: 0 0 20px 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #eee
}

nav.vertical ul li {
	display: block
}

nav.horizontal ul li {
	display: inline-block
}

img {
	max-width: 100%
}

body {
	padding: 100px 0 30px 0;
	background: url(images/banner.jpg) repeat !important;
	font-size: 100%;
	font-family: Roboto, sans-serif
}

.login {
	margin: 0 auto;
	width: 32%
}

.login h2 {
	margin: 0 0 50px 0;
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 30px;
	font-family: 'Droid Serif', serif
}

.login-top {
	padding: 40px 60px;
	-webkit-border-radius: 25px 25px 0 0;
	-moz-border-radius: 25px 25px 0 0;
	border-radius: 25px 25px 0 0;
	background: #E1E1E1;
	-o-border-radius: 25px 25px 0 0
}

.login-top h1 {
	margin: 0 0 20px 0;
	color: #F45B4B;
	text-align: center;
	font-weight: 500;
	font-size: 27px
}

.login-top input[type=text] {
	margin: 0 0 12px 0;
	padding: 15px 20px;
	width: 88%;
	outline: 0;
	border: 1px solid #ccc;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	background: #CACACA;
	color: #818181;
	font-weight: 500;
	font-size: 15px;
	-o-border-radius: 25px;
	-webkit-appearance: none
}

.login-top input[type=password] {
	margin: 0 0 12px 0;
	padding: 15px 20px;
	width: 88%;
	outline: 0;
	border: 1px solid #ccc;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	background: #CACACA;
	color: #818181;
	font-weight: 500;
	font-size: 15px;
	-o-border-radius: 25px;
	-webkit-appearance: none
}

.forgot a {
	display: inline-block;
	padding: 0 7px 0 0;
	border-right: 2px solid #F45B4B;
	color: #F45B4B;
	font-weight: 500;
	font-size: 13px
}

.forgot a:hover {
	color: #818181
}

.forgot input[type=submit] {
	display: inline-block;
	margin: 0 7px 0 3px;
	padding: 8px 7px;
	width: 20%;
	outline: 0;
	border: none;
	-webkit-border-radius: 19px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background: #F45B4B;
	color: #FFF;
	font-weight: 400;
	font-size: 17px;
	cursor: pointer;
	-o-border-radius: 6px
}

.forgot input[type=submit]:hover {
	background: #818181;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all
}

.forgot {
	text-align: right
}

.login-bottom {
	padding: 30px 65px;
	border-top: 2px solid #AD4337;
	-webkit-border-radius: 0 0 25px 25px;
	-moz-border-radius: 0 0 25px 25px;
	border-radius: 0 0 25px 25px;
	background: #E15748;
	text-align: right;
	-o-border-radius: 0 0 25px 25px
}

.login-bottom h3 {
	color: #866098;
	font-weight: 500;
	font-size: 4px
}

.login-bottom h3 a {
	color: #fff;
	font-weight: 500;
	font-size: 25px
}

.login-bottom h3 a:hover {
	color: #696969;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all
}

.copyright {
	text-align: center
}

.copyright p {
	color: #fff;
	font-weight: 400;
	font-size: 15px
}

.copyright p a {
	color: #E15748;
	font-weight: 400;
	font-size: 15px
}

.copyright p a:hover {
	color: #fff;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all
}

@media ( max-width :1440px) {
	.login {
		width: 35%
	}
}

@media ( max-width :1366px) {
	.login {
		width: 37%
	}
}

@media ( max-width :1280px) {
	.login {
		width: 40%
	}
}

@media ( max-width :1024px) {
	.login {
		width: 48%
	}

}

@media ( max-width :768px) {
	.login {
		width: 65%
	}
	.login-top h1 {
		font-size: 25px
	}
	.login-bottom h3 a {
		font-size: 22px
	}
	
	body {
		padding: 100px 0 0 0
	}
	.login h2 {
		font-size: 28px
	}
}

@media ( max-width :640px) {
	.login-top h1 {
		font-size: 23px
	}
	.forgot input[type=submit] {
		width: 22%;
		font-size: 15px
	}
	.login-top input[type=text] {
		padding: 12px 20px
	}
	.login-top input[type=password] {
		padding: 12px 20px
	}
	.login-bottom h3 a {
		font-size: 19px
	}
	.login-bottom h3 {
		font-size: 13px
	}
	
	body {
		padding: 50px 0 0 0
	}
}

@media ( max-width :480px) {
	.login {
		width: 80%
	}
	.login-top h1 {
		font-size: 21px
	}
	.login-top input[type=text] {
		width: 85%
	}
	.login-top {
		padding: 30px 40px
	}
	.login-top input[type=password] {
		width: 85%
	}
	.login h2 {
		font-size: 25px
	}
}

@media ( max-width :320px) {
	.login {
		width: 90%
	}
	.login-top {
		padding: 20px 25px
	}
	.login-top input[type=text] {
		margin: 0 0 7px 0;
		padding: 10px 20px;
		width: 81%;
		font-size: 13px
	}
	.login-top input[type=password] {
		margin: 0 0 7px 0;
		padding: 10px 20px;
		width: 81%;
		font-size: 13px
	}
	.forgot input[type=submit] {
		padding: 6px 7px;
		width: 25%;
		font-size: 11px
	}
	.forgot a {
		font-size: 11px
	}
	.login-bottom {
		padding: 20px 25px
	}
	.login-bottom h3 {
		font-size: 11px
	}
	.login-bottom h3 a {
		font-size: 17px
	}
	body {
		padding: 50px 0 0 0
	}
	.copyright p {
		font-size: 13px
	}
	.copyright p a {
		font-size: 13px
	}
	.login h2 {
		margin: 0 0 35px 0;
		font-size: 23px
	}
}
</style>
</head>
<body>
	<div class="login">
		<div class="login-top">
			<h1>LOGIN SYSTEM</h1>
			<form action="<@s.url relativeUrl=''/>/main.do" method="POST">
				<input type="text" placeholder="用户名" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '';}" name="username">
				<input type="password" placeholder="密码" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '';}" name="password">

				<div class="forgot">
					<input type="checkbox" name="ck">Remember me <input
						type="submit" value="Login">
				</div>
			</form>
			<div style="color: red"></div>
		</div>
		<div class="login-bottom copyright">
			<p>Copyright &copy; 2015.新余学院All rights reserved.</p>
		</div>
	</div>
</body>
</html>